<nz-card>
    <div class="common-search-wrap">
        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">状态</label>
                <div class="common-search-conrol">
                    <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="queryForm.state">
                        <nz-option nzLabel="全部" nzValue=""></nz-option>
                        <nz-option nzLabel="草稿" nzValue="0"></nz-option>
                        <nz-option nzLabel="待审核" nzValue="1"></nz-option>
                        <nz-option nzLabel="审核通过" nzValue="2"></nz-option>
                        <nz-option nzLabel="审核不通过" nzValue="3"></nz-option>
                        <nz-option nzLabel="采购中" nzValue="4"></nz-option>
                        <nz-option nzLabel="已完成" nzValue="5"></nz-option>
                        <nz-option nzLabel="已关闭" nzValue="6"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">包含商品</label>
                <div class="common-search-conrol">
                    <input type="text" nz-input placeholder="69码商品编码或名称" nzSize="default" [(ngModel)]="queryForm.whGood" />
                </div>
            </div>
    
            <div class="common-form-item">
                <label class="common-search-label">新建时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.dateFormat"></nz-range-picker>
                </div>
            </div>
    
            <div class="common-form-item">
                <label class="common-search-label">计划单号</label>
                <div class="common-search-conrol">
                    <input type="text" nz-input placeholder="请输入" nzSize="default" [(ngModel)]="queryForm.billNo" />
                </div>
            </div>
    
            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" (click)="query()">查询</button>
                    <button nz-button nzType="default" (click)="resetQuery()">重置</button>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="m-t-2">
    <div class="opera-wrap p-b-15">
        <button nz-button nzType="primary" [routerLink]="['../purchasePlanApply', 0]" *ngIf="permission.userPermission.has('stock:purchasePlan:add')">新增采购计划</button>
    </div>

    <div class="pagination-wrap-position table-wrap">
        <nz-table
            #basicTable
            nzSize="small"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzScroll]="{ x: '1100px' }"
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableLoading"
            [nzData]="listOfData?.records"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="listOfData?.total"
            [nzPageIndex]="listOfData?.current"
            [nzPageSize]="listOfData?.size"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)">
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="180px" nzLeft>计划单号</th>
                    <th nzAlign="center" nzWidth="150px">状态</th>
                    <th nzAlign="center" nzWidth="160px">计划人</th>
                    <th nzAlign="center" nzWidth="170px">新建时间</th>
                    <th nzAlign="center" nzWidth="150px">计划内容</th>
                    <th nzAlign="center" nzWidth="150px">冻结内容</th>
                    <th nzAlign="center" nzWidth="120px">已采购</th>
                    <th nzAlign="center" nzWidth="170px">审核时间</th>
                    <th nzAlign="center" nzWidth="170px">完成/关闭时间</th>
                    <th nzAlign="center" nzWidth="200px">备注</th>
                    <th nzAlign="center" nzWidth="300px" nzRight>操作</th>
                </tr>
            </thead>
    
            <tbody>
                <tr *ngFor="let data of basicTable.data; let index = index;">
                    <td nzAlign="center" nzLeft>
                        <a nz-button nz-button-tdlink nzType="link" [routerLink]="['../purchasePlanDetails', data.id]">{{ data.billNo }}</a>
                    </td>
                    <td
                        nzAlign="center"
                        class="{{ data.state == 0 ? 'font_Black' : data.state == 1 ? 'font_Yellow' : data.state == 2 ? 'font_Green' : data.state == 3 ? 'font_Gray' : data.state == 4 ? 'font_Black' : data.state == 5 ? 'font_Green' : data.state == 6 ? 'font_Gray' : 'font_Black'}}">
                        {{ data.stateText }}
                        <i
                            *ngIf="data.state == 3"
                            nz-icon
                            nz-tooltip
                            nzType="exclamation-circle"
                            nzTheme="outline"
                            [nzTooltipTitle]="titleTemplate"
                            nzTooltipPlacement="right">
                        </i>
                        <ng-template #titleTemplate>
                            <p>{{data.auditDesc}}</p>
                        </ng-template>
                    </td>
                    <td nzAlign="center">{{ data.planner }}</td>
                    <td nzAlign="center">{{ data.createTime }}</td>
                    <td nzAlign="center">{{ data.planContent }}</td>
                    <td nzAlign="center">{{ data.frozenContent || '-' }}</td>
                    <td nzAlign="center">{{ data.purchasedContent }}</td>
                    <td nzAlign="center">{{ data.auditTime ? data.auditTime : '-' }}</td>
                    <td nzAlign="center">{{ data.endTime ? data.endTime : '-' }}</td>
                    <td nzAlign="center">{{ data.remark ? data.remark : '-' }}</td>
                    <td nzAlign="center" nzRight>
                        <a 
                            *ngIf="permission.userPermission.has('stock:purchasePlan:view')"
                            nz-button
                            nzType="link"
                            [routerLink]="['../purchasePlanDetails', data.id]">
                            查看
                        </a>
                        <button
                            *ngIf="permission.userPermission.has('stock:purchasePlan:edit')"
                            nz-button
                            nzType="link"
                            [routerLink]="['../purchasePlanApply', data.id]"
                            [disabled]="data.state != 0 && data.state != 3">
                            编辑
                        </button>
                        <a
                            *ngIf="permission.userPermission.has('stock:purchasePlan:delete')"
                            nz-button
                            nzType="link"
                            nzDanger
                            nz-popconfirm
                            nzPopconfirmTitle="确认删除吗?"
                            [disabled]="data.state != 0"
                            (nzOnConfirm)="confirm(data.id)">
                            删除
                        </a>
                        <button
                            *ngIf="permission.userPermission.has('stock:purchasePlan:check')"
                            nz-button
                            nzType="link"
                            [routerLink]="['../purchasePlanDetails', data.id]"
                            [disabled]="data.state != 1">
                            审核
                        </button>
                        <button
                            *ngIf="(data.state == 2 || data.state == 4) && data.isTrue == 1"
                            nz-button
                            nzType="link"
                            [routerLink]="['/stock/purchaseOrderAdd', 0, { type:'create',number: data.billNo}]">
                            生成采购单
                        </button>
                        <button
                            *ngIf="permission.userPermission.has('stock:purchasePlan:manuallyCLose')"
                            nz-button
                            nzType="link"
                            [routerLink]="['../purchasePlanDetails', data.id]"
                            [disabled]="data.state != 4 && data.state != 2">
                            手动关闭
                        </button>
                    </td>
                </tr>
            </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
    </div>
</nz-card>
